<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<style type="text/css">
body {
	margin:0; 
	font-size:12px;
}
.tabnav {
	padding:10px;
}
.tab_nav { 
	margin: 5px 0 0 0;
	padding:0;
	height:25px;
	line-height:24px;
}
.tab_nav li {
	float:left; 
	margin:0 1px; 
	list-style:none; 
	border-width: 0 0 0px 0;
	border-style: solid;
	border-color: #009AD9;
	height:24px; 
	width:60px; 
	text-align:center; 
	background: none repeat scroll 0 0 #F1F1F1;
}
.tab_nav li on{
	float:left; 
	margin:0 1px; 
	list-style:none; 
	border:1px solid #999; 
	border-bottom:none; 
	height:24px; 
	width:60px; 
	text-align:center; 
	background:#FFF;
}
a {
	font:bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; 
	color:green; 
	text-decoration:none;
}
a:hover {
	color:red;
}
.tab_content {
	width:398px; 
	height:273px; 
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #009AD9;
	font:bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; 
	text-align:center; 
	background:#FFF; 
	overflow:hidden;
}
#t_1,#t_2,#t_3 {
	width:100%;
	height:273px;
}
</style>
</head>
<body>
	<div class"tabnav">
		<ul class="tab_nav">
			<li class="on"><a href="#t_1">tab_1</a></li>
			<li><a href="#t_2">tab_2</a></li>
			<li><a href="#t_3">tab_3</a></li>
		</ul>
		<div class="tab_content">
			<div id="t_1">tab_1</div>
			<div id="t_2">tab_2</div>
			<div id="t_3">tab_3</div>
		</div>
	</div>
</body>
</html>